<template>
	<!-- 兑换 -->
	<view class="exchange-box">
		<nav-bar :title="i18n.exchange.title" @_back="_back" rightIcon="plan" @rightClick="rightClick" />
		<view class="container">
			<view class="change-box">
				<view class="left-box">
					<view class="left-box-top" @click="openCurrency">
						<text class="white-text">{{form_currentcy}}</text>
						<u-icon v-show="!isUsdt" name="arrow-down" color="rgba(255, 255, 255, .4)" size="24"></u-icon>
					</view>
					<view class="left-box-bottom dis-between" @click="toOpen">
						<text class="white-text">{{to_currentcy}}</text>
						<u-icon v-show="isUsdt" name="arrow-down" color="rgba(255, 255, 255, .4)" size="24"></u-icon>
					</view>
				</view>
				<view class="right-box list-bg">
					<image @click="transferredClick" class="change-image" src="../../static/images/ui/change.png"
						mode="widthFix"></image>
				</view>
			</view>
			<!-- list -->
			<custom-list :title="i18n.exchange.quantity">
				<template slot="titleRightText" v-if="form_currentcy === 'ETH' || to_currentcy === 'ETH'">
					<text>{{i18n.point.usable + '：' + userNumber}}</text>
				</template>
				<view class="dis-between">
					<input v-model="info.num" type="number" :placeholder="i18n.exchange.enterNumber">
					<view class="right-box-all">
						<text>{{info.to_currentcy}}</text>
						<text @click="allIn" class="main-color">{{i18n.common.all}}</text>
					</view>
				</view>
			</custom-list>
			<custom-list>
				<view class="dis-between exchange-text">
					<view>
						<text>{{i18n.exchange.rates}}</text>
						<text class="white-text">{{!isUsdt? rate: "1/" + rate}}</text>
					</view>
					<view>
						<text>{{i18n.exchange.btc}}</text>
						<text class="white-text">{{Number(lock_change_balance)}}</text>
					</view>
					<view>
						<text>{{i18n.exchange.usdt}}</text>
						<text class="white-text">{{Number(change_balance)}}</text>
					</view>
				</view>
			</custom-list>
			<custom-submit @click="submit" :loading="loading" class="submit-box" :title="i18n.exchange.title">
			</custom-submit>
		</view>
		<!-- form选择币种 -->
		<select-currency :currentId="isUsdt? info.currency_to_id: info.currency_from_id"
			:list="formList | toList(form_currentcy)" ref="sleCurrency" @click="currentCyClick"></select-currency>
		<!-- to选择币种 -->
		<!-- <select-currency :currentId="info.currency_to_id" :list="formList | toList(form_currentcy)" ref="toCurrency" @click="toClick"></select-currency> -->
	</view>
</template>

<script>
	import minix from '@/utils/minix.js'
	import CustomList from '@/components/CustomList/index.vue'
	import CustomSubmit from '@/components/CustomSubmit/index.vue'
	import SelectCurrency from '@/components/SelectCurrency/vue.vue'
	import {
		mapGetters
	} from 'vuex'
	import {
		walletExchange,
		walletRate
	} from '@/api/index.js'
	import {
		Toast
	} from '@/utils/util.js'
	export default {
		mixins: [minix],
		components: {
			CustomList,
			CustomSubmit,
			SelectCurrency
		},
		filters: {
			toList(val, form_name) {
				let arry = [];
				for (let i in val) {
					if (val[i].title !== 'USDT') {
						arry.push(val[i])
					}
				}
				return arry;
			}
		},
		data() {
			return {
				info: {
					currency_from_id: null,
					currency_to_id: null,
					num: 0
				},
				loading: false,
				formList: [],
				userNumber: 0,
				rate: 0,
				lock_change_balance: 0,
				change_balance: 0,
				form_currentcy: null,
				to_currentcy: null,
				isUsdt: false,
				time: null,
				isRequest: true
			}
		},
		onShow() {
			this.$nextTick(() => {
				for (let i in this.changeWallet) {
					let obj = {
						title: this.changeWallet[i].currency_name,
						id: this.changeWallet[i].currency
					}
					this.formList.push(obj);
					if (this.changeWallet[i].currency_name === 'USDT') {
						this.info.currency_to_id = this.changeWallet[i].currency
						this.to_currentcy = this.changeWallet[i].currency_name
						// this.rate = this.changeWallet[i].pb_price;
						this.change_balance = this.changeWallet[i].change_balance;
					}
					if (this.changeWallet[i].currency_name === 'BTC') {
						this.info.currency_from_id = this.changeWallet[i].currency;
						this.form_currentcy = this.changeWallet[i].currency_name;
						this.userNumber = this.lock_change_balance = this.changeWallet[i].change_balance;
					}
					if (this.changeWallet[i].currency_name === 'ETH') {
						this.userNumber = this.changeWallet[i].change_balance;
					}
				}
				this.getRateDetail(this.info.currency_from_id);
				this.isRequest = true;
				this.setRateTime();
			})
		},
		onHide() {
			this.isRequest = false;
			clearInterval(this.time);
			this.time = null;
		},
		onBackPress() {
			this.isRequest = false;
			clearInterval(this.time);
			this.time = null;
		},
		computed: {
			...mapGetters(['currencyList', 'token', 'changeWallet']),
			i18n() {
				return this.$t('message');
			},
		},
		methods: {
			rightClick() {
				uni.navigateTo({
					url: '/pages/exchange/record'
				})
			},
			openCurrency() {
				if (this.isUsdt) return;
				this.$refs.sleCurrency.open();
			},
			toOpen() {
				if (!this.isUsdt) return;
				this.$refs.sleCurrency.open();
			},
			currentCyClick(val) {
				if (!this.isUsdt) {
					this.form_currentcy = val.name;
					this.info.currency_from_id = val.id;
					return;
				}
				this.to_currentcy = val.name;
				this.info.currency_to_id = val.id;
			},
			toClick(val) {
				this.to_currentcy = val.name;
				this.info.currency_to_id = val.id;
			},
			async submit() {
				if (!this.info.num) return Toast(this.i18n.exchange.enterNumber);
				if (this.info.currency_from_id === this.info.currency_to_id) return Toast(this.i18n.exchange
					.differentCurrencies);
				this.loading = true;
				this.info.token = this.token;
				let {
					data
				} = await this.getRateDetail(!this.isUsdt?this.info.currency_from_id: this.info.currency_to_id);
				if (!data) return this.loading = false;
				this.info.rate = data;
				let {
					error,
					res
				} = await walletExchange(this.info);
				if (error) return this.loading = false;;
				await Toast(this.i18n.exchange.success)
				this.loading = false;
				uni.navigateTo({
					url: '/pages/exchange/record'
				})
			},
			transferredClick() {
				this.isUsdt = !this.isUsdt;
				if (!this.info.currency_from_id || !this.info.currency_to_id) return;
				let form_id = this.info.currency_from_id;
				let form_name = this.form_currentcy;
				let to_id = this.info.currency_to_id;
				let to_name = this.to_currentcy;
				this.info.currency_from_id = JSON.parse(JSON.stringify(to_id));
				this.form_currentcy = JSON.parse(JSON.stringify(to_name));
				this.info.currency_to_id = JSON.parse(JSON.stringify(form_id));
				this.to_currentcy = JSON.parse(JSON.stringify(form_name));
			},
			allIn() {
				this.$nextTick(() => {
					for (let i in this.changeWallet) {
						if (this.changeWallet[i].currency_name === this.form_currentcy) {
							this.info.num = JSON.parse(JSON.stringify(this.changeWallet[i].change_balance));
						}
					}
				})
			},
			// 获取汇率
			async getRateDetail(currency_id) {
				let {
					error,
					res
				} = await walletRate({
					currency_id: currency_id
				});
				if (error) return {
					data: null
				};
				this.rate = res;
				return {
					data: res
				}
			},
			// 定时器
			setRateTime() {
				let _this = this;
				clearInterval(_this.time)
				_this.time = null;
				if (!_this.isRequest) return;
				_this.time = setInterval(() => {
					_this.getRateDetail(!_this.isUsdt?_this.info.currency_from_id: _this.info.currency_to_id );
					_this.setRateTime();
				}, 2000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.exchange-box {
		.change-box {
			margin-top: 60rpx;
			display: flex;
			height: 176rpx;

			.left-box {
				width: calc(100% - 130rpx);
				height: 100%;
				border: 1px solid rgba(255, 255, 255, .1);
				border-right: none;
				border-radius: 16rpx 0 0 16rpx;

				&>view {
					height: 88rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 30rpx;
					font-size: 30rpx;

					&:first-child {
						border-bottom: 1px solid rgba(255, 255, 255, .1);
					}
				}
			}

			.right-box {
				width: 130rpx;
				height: 100%;
				border-radius: 0px 16rpx 16rpx 0px;
				display: flex;
				align-items: center;
				justify-content: center;

				.change-image {
					width: 60rpx;
				}
			}
		}

		.submit-box {
			margin-top: 100rpx;
		}

		.dis-between {
			&>.right-box-all {
				font-size: 30rpx;
				color: rgba(255, 255, 255, .54);

				.main-color {
					margin-left: 30rpx;
				}
			}

			&.exchange-text {
				color: rgba(255, 255, 255, .4);
				font-size: 24rpx;

				&>view {
					width: 33%;
					font-size: 20rpx;

					&:nth-child(2) {
						text-align: center;
					}

					&:nth-child(3) {
						text-align: right;
					}
				}

				.white-text {
					display: block;
					margin-top: 22rpx;
					font-size: 30rpx;
				}
			}
		}
	}
</style>
